<template>
	<view class="coupon-container">
		
		<view class="filter-status-bar">
			<view 
			class="filter-item" 
			:class="{ selected: page.status === item.code }" 
			v-for="item in filterStatuses"
			:key="item.code"
			@tap="handleChangeStatus(item.code)"
			>
				{{ item.msg }}
			</view>
		</view>
		<view class="fill"></view>
		
		<view class="coupon-list">
			<!--优惠券-->
			<view 
				v-for="item in couponList" 
				:key="item.id" 
				class="coupon-item" 
				:class="{
					'used': item.isUsed,
					'expired': isExpired(item.expireDate)
				}"
			>
				<view class="coupon-left">
					<text class="amount">¥{{ formatAmount(item.amount) }}</text>
					<text class="condition" v-if="item.isThreshold">满{{ formatAmount(item.atLeast) }}元可用</text>
					<text class="condition" v-else>无门槛券</text>
				</view>

				<view class="coupon-right">
					<text class="name">{{ item.name }}</text>
					<text class="date">有效期: {{ formatDate(item.startDate) }}至{{ formatDate(item.expireDate) }}</text>

					<view  class="status">
						<text class="used" v-if="item.isUsed">已使用</text>
						<text class="expired" v-else-if="isExpired(item.expireDate)">已过期</text>
						<view class="use" v-else @tap="gotoIndexPage">去使用</view>
					</view>
				</view>
			</view>
			<!-- 空状态 -->
			<view class="empty" v-if="couponList.length === 0">
				<image src="/static/imgs/empty.png" mode="aspectFit" alt="暂无优惠券"></image>
				<text>暂无优惠券</text>
			</view>
			<!--加载更多-->
			<view class="loading-container" v-else>
				<uni-load-more 
					iconType="circle"
					:status="nomore ? 'nomore' : 'loading'" 
					:content-text="{contentrefresh: '正在加载...', contentnomore: '- 到底了 -'}"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getCouponPageByStatus } from '@/api/coupon.js'
import { onReachBottom } from '@dcloudio/uni-app'
import { formatAmount } from '@/utils/amountUtil.js'

const filterStatuses = [
	{ code: -1, msg: '全部' },
	{ code: 0, msg: '未使用' },
	{ code: 1, msg: '已使用' },
	{ code: 2, msg: '已过期' }
]

// 模拟数据
const couponList = ref([])

const page = reactive({
	pageNum: 1,
	pageSize: 10,
	status: -1
})
const nomore = ref(false)

// 格式化日期
function formatDate (dateStr) {
	return dateStr.replace(/-/g, '.')
}

// 检查是否过期
function isExpired (expireDate) {
	const today = new Date()
	const expire = new Date(expireDate)
	return today > expire
}

// 返回首页
function gotoIndexPage () {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

// 切换状态
function handleChangeStatus (status) {
	page.status = status
	resetPage()
	getPage()
}

// 重置分页
function resetPage () {
	page.pageNum = 1
	couponList.value = []
	nomore.value = false
}

// 查询分页
function getPage () {
	if (nomore.value) {
		return
	}
	getCouponPageByStatus(page).then(res => {
		couponList.value = [ ...couponList.value, ...res.data.records ]
		if (page.pageNum < res.data.pages) {
			page.pageNum++
		} else {
			nomore.value = true
		}
	})
}

onReachBottom(() => {
	getPage()
})

onMounted(() => {
	getPage()
})

</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.coupon-container {
	padding: 0 20rpx 20rpx 20rpx;
	min-height: 100vh;
	background-color: #f8f8f8;

	.filter-status-bar {
		position: fixed;
		left: 0;
		top: 0;
		background-color: #f8f8f8;
		z-index: 666;
		
		height: 80rpx;
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		.filter-item {
			padding: 8rpx 20rpx;
			color: #333;
			background-color: #e8e8e8;
			border-radius: 20rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
		}
		.selected {
			color: #ff5000;
			background-color: rgba(#ff5000, 0.1);
		}
	}
	.fill {
		height: 80rpx;
	}

	.coupon-list {
		height: 100%;

		.coupon-item {
			display: flex;
			margin-bottom: 20rpx;
			height: 200rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background: linear-gradient(to right, #ff9500, #ff5000);

			.coupon-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				color: #fff;

				.amount {
					font-size: 50rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.condition {
					font-size: 24rpx;
				}
			}

			.coupon-right {
				flex: 1;
				padding: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.date {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 15rpx;
				}

				.status {
					display: flex;
					justify-content: flex-end;
					border-top: 1rpx dashed #ccc;
					padding: 15rpx 0 0 0;
					font-size: 24rpx;
					color: #ff5000;

					.used, .expired {
						color: #999;
					}
					.use {
						padding: 8rpx 20rpx;
						color: #fff;
						border-radius: 8rpx;
						background: linear-gradient(to right, #ff9500, #ff5000);
					}
				}
			}
		
			&.used, &.expired {
				background: linear-gradient(to right, #c3c3c3, #999);
			
				.coupon-left {
					.amount,
					.condition {
						color: #fff;
					}
				}
			
				.coupon-right {
					.name,
					.date {
						color: #555;
					}
				}
			}
		}
	
		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 70vh;
		
			image {
				width: 500rpx;
				height: 500rpx;
				margin-bottom: 30rpx;
				opacity: 0.6;
			}
		
			text {
				color: #666;
				font-size: 28rpx;
			}
		}
		
		.loading-container {
			padding-bottom: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
	}
}
</style>